import * as echarts from "echarts";
import { reactive } from "vue";
import icon1 from "@/assets/images/visualization/icon1.png"
import icon2 from "@/assets/images/visualization/icon2.png"
import icon3 from "@/assets/images/visualization/icon3.png"
import icon4 from "@/assets/images/visualization/icon4.png"
import icon5 from "@/assets/images/visualization/icon5.png"
export const list = reactive([
  {
      name:"本年纵向项目",
      value: 0,
      name2:"历史纵向项目",
      value2: 0,
      // icon: "icon1.png",
      icon: icon1,
      id:1
    },
    {
      name:"本年横向项目",
      value: 0,
      name2:"历史横向项目",
      value2: 0,
      // icon: "icon2.png",
      icon: icon2,
      id:2
    },
    {
      name:"本年科研成果",
      value: 0,
      name2:"历史科研成果",
      value2: 0,
      // icon: "icon3.png",
      icon: icon3,
      id:3
    },
    {
      name:"本年科研学术成果",
      value: 0,
      name2:"历史科研学术成果",
      value2: 0,
      // icon: "icon4.png",
      icon: icon4,
      id:4
    },
    {
      name:"科研人员总数",
      value: 0,
      name2:"",
      value2: 0 ,
      // icon: "icon5.png",
      icon: icon5,
      id:5
    }
  ])
  
export const getAssetsFile = (url) => {
  // return new URL(`../../../assets/images/visualization/${url}`, import.meta.url).href;
  return new URL(url, import.meta.url).href;
};

export const gradientColors = [
  // option1
  new echarts.graphic.LinearGradient( 0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
    [
      { offset: 0, color: "#0ECFF8" }, // 0% 处的颜色
      { offset: 1, color: "#0570E9" }, // 100% 处的颜色
    ]
  ),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
    [
      { offset: 0, color: "#932AE1" }, // 0% 处的颜色
      { offset: 1, color: "#303E8C" }, // 100% 处的颜色
    ]
  ),
// option5
  new echarts.graphic.LinearGradient( 0,  0, 1,  0, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
    [
      { offset: 0, color: "#9535EF" }, // 0% 处的颜色
      { offset: 1, color: "#0AB0FE" }, // 100% 处的颜色
    ]
  ),
  new echarts.graphic.LinearGradient( 0,  0, 1,  0, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
    [
      { offset: 0, color: "#007AFF" }, // 0% 处的颜色
      { offset: 1, color: "#016FED" }, // 100% 处的颜色
    ]
  ),
  new echarts.graphic.LinearGradient( 0,  0, 1,  0, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
    [
      { offset: 0, color: "#005AFF" }, // 0% 处的颜色
      { offset: 1, color: "#016FED" }, // 100% 处的颜色
    ]
  ),
  // option4
  new echarts.graphic.LinearGradient( 0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
    [
      { offset: 0, color: "#00A2FF" }, // 0% 处的颜色
      { offset: 1, color: "#1166FF" }, // 100% 处的颜色
    ]
  ),
  // option6
  new echarts.graphic.LinearGradient(
    0,
    0,
    1,
    0, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
    [
      { offset: 0, color: "#0E1B55" }, // 0% 处的颜色
      { offset: 1, color: "#19FFFC" }, // 100% 处的颜色
    ]
  )
]
export const gradientColors_options9 = [
  // option9
  // new echarts.graphic.LinearGradient(
  //   0,
  //   0,
  //   0,
  //   1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
  //   [
  //     { offset: 0, color: "#E26F72" }, // 0% 处的颜色
  //     { offset: 1, color: "#FE898B" }, // 100% 处的颜色
  //   ]
  // ),
  new echarts.graphic.LinearGradient(
    0,
    0,
    1,
    0, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
    [
      { offset: 0, color: "#FFAD56" }, // 0% 处的颜色
      { offset: 1, color: "#F7FFA0" }, // 100% 处的颜色
    ]
  ),
  new echarts.graphic.LinearGradient(
    0,
    0,
    1,
    0, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
    [
      { offset: 0, color: "#6CFFA7" }, // 0% 处的颜色
      { offset: 1, color: "#A0FFD3" }, // 100% 处的颜色
    ]
  ),
  new echarts.graphic.LinearGradient(
    0,
    0,
    1,
    0, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
    [
      { offset: 0, color: "#7D6CFF" }, // 0% 处的颜色
      { offset: 1, color: "#ABA0FF" }, // 100% 处的颜色
    ]
  ),
  new echarts.graphic.LinearGradient(
    0,
    0,
    1,
    0, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
    [
      { offset: 0, color: "#326DCE " }, // 0% 处的颜色
      { offset: 1, color: "#619DFF" }, // 100% 处的颜色
    ]
  ),
  new echarts.graphic.LinearGradient(
    0,
    0,
    1,
    0, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
    [
      { offset: 0, color: "#468CFF" }, // 0% 处的颜色
      { offset: 1, color: "#91E3F7" }, // 100% 处的颜色
    ]
  )
]
export const option = ref({
  color:["#FEC006","#00BFF3"],
  textStyle: {color:"#ffffff"}, 
  title: {
      text: '近五年学校项目量',
      //subtext: '',
      textStyle : {color:"#fff",fontSize:'16'},//标题样式
  },
  tooltip: {
    show: true
  },
  grid: [{
    left: 40,
    right: 40,
      // height: '80'
  }],
  xAxis: {
    splitLine: {show: false},
    type: 'category',
    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
    data: []
  },
  yAxis: {
    splitLine: {show: false},
    type: 'value'
  },
  series: [
    {
      data: [
        {
          value: 0,
          itemStyle: {
            color: gradientColors[0]
          }
        },
        {
          value: 0,
          itemStyle: {
            color: gradientColors[1]
          }
        },
        {
          value: 0,
          itemStyle: {
            color: gradientColors[0]
          }
        },
        {
          value: 0,
          itemStyle: {
            color: gradientColors[1]
          }
        },
        {
          value: 0,
          itemStyle: {
            color: gradientColors[0]
          }
        }
      ],
      type: 'bar',
      barMaxWidth: 13,
      itemStyle: {
        borderRadius: 7,
        color: gradientColors[1]
      },
      showBackground: true,
      backgroundStyle: {
        color: '#303E8C'
      }
    }
  ]
});

export const option2 = ref({
  textStyle: {color:"#ffffff"}, 
  title: {
    text: "本年度学院科研立项经费TOP5",
    left: "left",
    // top:20,
    textStyle: {
      fontSize: 16,
      color: "#fff"
    }
  },
  grid: {
    left: 70,
    right: 40,
  },
  tooltip: {
    show: true,
  },
  xAxis: {
    splitLine: {
      show: false, //分割线
    },
    axisLabel:{
      rotate:25
    },
    data: ["中医学院", "基础医学部", "附属医院", "基建后勤处", "kyc"],
  },
  yAxis: {
    name: "(万元)",
    splitLine: {
      show: true,
      lineStyle: {
      // 使用深浅的间隔色
        color: ['#50557a', '#50557a']
      }
    },
  },
  series: [
    {
      name: "到账经费",
      type: "bar",
      barWidth: 12,
      barGap: "100%",
      itemStyle: {
        borderRadius: 5,
        color:"#3292FF"
      },
      data: [0,0,0,0,0],
    },
    {
      name: "立项经费",
      type: "bar",
      barWidth: 12,
      itemStyle: {
        borderRadius: 5,
        color: "#2ED1FF"

      },
      data: [0,0,0,0,0],
    }
  ],
});


export const option3 = ref({
  title: {
    text: "近五年论文发表情况",
    textStyle: {
      fontSize: 16,
      color: "#fff"
    },
  },  
  color:"#0058C4",
  textStyle: {color:"#ffffff"},
  tooltip: {
    show: true,
  },
  grid: {
    left: 40,
    right: 40,
    bottom: 20
  },
  xAxis: {
    type : 'category',
    boundaryGap : false,
    axisLine: {onZero: true},
    axisLine: {
      show: false, //坐标轴
    },
    data:  ['2021', '2022', '2023', '2024', '2025']
  },
  yAxis : {
    type : 'value',
    // max : 10,
    splitLine: {
      show: false
    }

  },
  series : [
      {
          name:'',
          type:'line',
          symbol: 'circle',
          symbolSize: 12,
          smooth: 0.6,
          itemStyle: {
            color: "#0058C4", // 点的颜色
            // normal: {
            //   color: "#0058C4", // 折线点的颜色
            //   lineStyle: {
            //     color: "#0058C4" // 折线的颜色
            //   }
            // }
          },
          lineStyle: {
            color: '#0068B7 ',
            width: 3
          },
          hoverAnimation: false,
          data:[0,0,0,0,0]
      }
  ]
});

// ----------------------------- 2

export const option4 = ref({
  textStyle: {color:"#ffffff"}, 
  title: {
    text: "本年度学校按项目级别的立项情况",
    left: 0,
    // top: 20,
    textStyle: {
      fontSize: 16,
      color: "#ffffff",
      fontWeight: "normal",
    },
  },
  grid: {
    left: 40,
    right: 40,
    top: 50,
    // bottom: 20,
  },
  tooltip: {
    show: true,
  },
  xAxis: {
    splitLine: {
      show: false, //分割线
    },
    // axisLine: {
    //   show: false, //坐标轴
    // },
    // axisTick: {
    //   show: false, //坐标刻度
    // },
    data: [`国家级`,`部级`,`省级`,`地市级`,`校级`,`横向课题`],
  },
  yAxis: {
    name: "",
    splitLine: {
      show: true,
      lineStyle: {
      // 使用深浅的间隔色
        color: ['#50557a', '#50557a']
      }
    },
  },
  series: [
    {
      // name: "",
      type: "bar",
      barGap: "100%",
      barMaxWidth: 25,
      itemStyle: {
        color: gradientColors[5]
      },
      // data: [5, 20, 36],
      data:[0,0,0,0,0,0]
    },
  ],
});

export let projectExpenditureTotal = ref(0);
export const option5 = ref({
  color: gradientColors,
  textStyle: {color:"#ffffff"}, 
  title: {
    text: "本年度项目经费",
    left: "left",
    // top: 20,
    textStyle: {
      fontSize: 16,
      color: "#fff"
    },
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    top: '40%',
    // left: 'right',
    right: 40,
    textStyle: {
      color: "#ffffff",
    },
  },
  series: [
    {
      left: -40,
      type: 'pie',
      // radius: ['45%', '52%'],
      radius: ['55%', '62%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      // label: {
      //   normal: {
      //     show: true,
      //     position: 'center',
      //     // color: '#4c4a4a',          
      //     // total 和 active应该是自定义的变量属性
      //     formatter: '{total|' + 200 + '}' + '\r' + '{active|万元}',          
      //     // formatter: '{total|' + 200 + '}' + '\n\r' + '{active|万元}',
      //     rich: {  // rich 用于单独设置 formatter中的自定义变量：total 和 active
      //       total: {
      //         fontSize: 28,
      //         fontFamily: "微软雅黑",
      //         color: '#fff'
      //       },
      //       active: {
      //         fontFamily: "微软雅黑",
      //         fontSize: 28,
      //         color: '#fff',
      //         lineHeight: 30,
      //       }
      //     }
      //   },
      //   emphasis: {
      //     // 这种设置优先级高
      //     show: true,
      //     // formatter:'{b}: {d}',
      //     // 这种设置方式无效
      //     // label: {
      //     //   show: true,
      //     //   fontSize: 20,
      //     //   fontWeight: 'bold',
      //     //   formatter:'{b}: {d}'
      //     // }
      //   }
      // },      
      label: {
        show: true,
        position: 'center',
        formatter: ()=>{
          return `${projectExpenditureTotal.value}`
        },
        fontSize: 28,
        fontWeight: 'bold',
        color: "#fff"
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 28,
          fontWeight: 'bold',
          // formatter:`${projectExpenditureTotal.value}`,
          color: "#fff"
        }
      },
      tooltip: {
        show: true,
        formatter: '{b0}: <br />{c0}\r(占比：{d}%)'
      },
      data: [
        { value: 1048, name: '纵向项目' },
        { value: 735, name: '横向项目' },
        { value: 580, name: '校级项目' }
      ]
    }
  ]
});
export let projectFundsReceivedTotal = ref(0);
export const option5_2 = ref({
  color: gradientColors,
  textStyle: {color:"#ffffff"}, 
  title: {
    text: "本年度到账经费",
    left: "left",
    // top: 20,
    textStyle: {
      fontSize: 16,
      color: "#fff"
    },
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    top: '40%',
    // left: 'right',
    right: 40,
    textStyle: {
      color: "#ffffff",
    },
  },
  series: [
    {
      // left: "-10%",
      left: -40,
      name: '本年度到账经费',
      type: 'pie',
      radius: ['55%', '62%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },      
      label: {
        show: true,
        position: 'center',
        formatter: ()=>{
          return `${projectFundsReceivedTotal.value}`
        },
        // formatter:0,
        fontSize: 28,
        fontWeight: 'bold',
        color: "#fff"
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 28,
          fontWeight: 'bold',
          color: "#fff"
        }
      },
      tooltip: {
        show: true,
        formatter: '{b0}: <br />{c}\r(占比：{d}%)'
      },
      data: [
        { value: 0, name: '纵向项目' },
        { value: 0, name: '横向项目' },
        { value: 0, name: '校级项目' }
      ]
    }
  ]
});

export const option5_3 = ref({
  title: {
    text: "本年度成果统计",
    left: "center",
    textStyle: {
      fontSize: 14,
      color: "#333",
      fontWeight: "normal",
    },
  },
  legend: {
    left: "center",
    bottom: 0,
    icon: "circle",
    textStyle: {
      color: "#6E7079",
    },
  },
  grid: {
    show: false,
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  },
  tooltip: {
    show: true,
  },
  graphic: {
    elements: [
      {
        type: "text",
        left: "center",
        top: "110",
        style: {
          text: "总",
          textAlign: "center",
          fill: "#fff",
          fontSize: 14,
        },
      },
      {
        type: "text",
        left: "center",
        top: "130",
        style: {
          text: `${projectFundsReceivedTotal.value}`,
          // text: "200项",  
          textAlign: "center",
          fill: "#fff",
          fontSize: 20,
        },
      },
    ],
  },
  series: [
    {
      name: "成果类型",
      type: "pie",
      radius: ["40%", "70%"],
      color: ["#FFA84A", "#32D9AC"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        formatter: "{d}%",
      },
      labelLine: {
        show: true,
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
        },
      },
      data: [
        { value: 1048, name: "论文" },
        { value: 500, name: "专利" },
      ],
    },
  ],
});

export const option6 = ref({
  textStyle: {color:"#ffffff"}, 
  color:['#0058C4','#ffffff','#00fff9','#49bdca','#1E5F6F'],
  title: {
    text: "近五年专利发表情况",
    left: "left",
    // top: 20,
    textStyle: {
      fontSize: 16,
      color: "#ffffff"
    },
  },
  grid: {
    // show: true,
    left: 40,
    right: 40,
    top: 60,
    bottom: 20,
  },
  tooltip: {
    show: true,
  },
  xAxis: {
    splitLine: {
      show: false,
    },
    minInterval: 1, // 确保最小间隔为1，即刻度至少间隔1个单位
    // min: Math.floor(minValue),
    // max: Math.ceil(maxValue)
    // axisLine: {
    //   show: false, //坐标轴
    // },
    // axisTick: {
    //   show: false, //坐标刻度
    // },
  },
  yAxis: {
    splitLine: {
      show: false, //分割线
    },
    data: ["2021", "2022", "2023","2024", "2025"],
  },
  series: [
    {
      name: "专利发表",
      type: "bar",
      barWidth: 10,
      barGap: "100%",
      itemStyle: {
        // borderRadius: 15,
        color: gradientColors[6] 
      },
      data: [0, 0, 0,0,0],
    }
  ],
});


// ---------------------------------- 7，8，9
export const option7 = ref({
  color:["#FEC006","#00BFF3"],
  textStyle: {color:"#ffffff"}, 
  title: {
      text: '本年度学院成果TOP5',
      textStyle: {
        fontSize: 16,
        color: "#fff"
      },
  },
  tooltip: {
      trigger: 'axis',
      axisPointer : {            // 坐标轴指示器，坐标轴触发有效
        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
  },
  grid: [{
      left: 30,
      right: 30
      // height: '80'
  }],
  xAxis: {
    splitLine: {show: false},
    axisLabel:{
      rotate:25
    },
    type: 'category',
    data: ["中医学院", "基础医学部", "附属医院", "基建后勤处", "kyc"],
  },
  yAxis: {
    splitLine: {show: false},
    type: 'value'
  },
  series: [
    {
      data: [
        {
          value: 0,
          itemStyle: {
            color: '#FEC006'
          }
        },
        {
          value: 0,
          itemStyle: {
            color: '#00BFF3'
          }
        },
        {
          value: 0,
          itemStyle: {
            color: '#FEC006'
          }
        },
        {
          value: 0,
          itemStyle: {
            color: '#00BFF3'
          }
        },
        {
          value: 0,
          itemStyle: {
            color: '#FEC006'
          }
        }
      ],
      type: 'bar',
      barMaxWidth: 13,        
      itemStyle: {
        borderRadius: 2,
        color: '#00BFF3'
      },
      showBackground: true,
      backgroundStyle: {
        color: '#303E8C'
      }
    }
  ]
});
export const option8 = ref({
title: {
  text: "近五年成果数量",
  // top: 20,
  textStyle: {
    fontSize: 16,
    color: "#fff"
  },
},  
color:"#FC41A8",
textStyle: {color:"#ffffff"},
tooltip: {
  show: true,
},
grid: [{
    left: 30,
    right: 30
    // height: '80'
}],
xAxis: {
  type : 'category',
  boundaryGap : false,
  axisLine: {onZero: true},
  axisLine: {
    show: false, //坐标轴
  },
  data:  ['2021', '2022', '2023', '2024', '2025']
},
yAxis : {
  type : 'value',
  // max : 10,
  splitLine: {
    show: false
  }
},
series : [
    {
        name:'',
        type:'line',
        smooth: 0.6,
        // symbol: 'none',        
        symbol: 'circle',
        symbolSize: 12,
        smooth: 0.6,
        lineStyle: {
          color: '#FC41A8',
          width: 3
        },
        hoverAnimation: false,
        data:[0,0,0,0,0]
    } 
  ]
});

export const option9 = ref({
textStyle: {color:"#ffffff"}, 
title: {
  text: "近五年获奖情况",
  // top:20,
  textStyle: {
    fontSize: 16,
    color: "#fff",
  },
},
grid: {
  left: 40,
  right: 40,
  top: 40,
  bottom: 20,
},
tooltip: {
  show: true,
},
xAxis: {
  name: "",
  splitLine: {
    show: false,
  },
  minInterval: 1, // 确保最小间隔为1，即刻度至少间隔1个单位
  // min: Math.floor(minValue),
  // max: Math.ceil(maxValue)
},
yAxis: {
  splitLine: {
    show: false, //分割线
  },
  axisLine: {
    show: true, //坐标轴
  },
  axisTick: {
    show: true, //坐标刻度
  },
  data: ["2021", "2022", "2023","2024", "2025"]
},
series: [
  {
    name: "",
    type: "bar",
    barWidth: 12,
    barGap: "100%",
    itemStyle: {
      borderRadius: 15,
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
        [
          { offset: 0, color: "#E26F72" }, // 0% 处的颜色
          { offset: 1, color: "#FE898B" }, // 100% 处的颜色
        ]
      ),
    },
    data: [
      {
        value: 0,
        itemStyle: {
          color: gradientColors_options9[0]
        }
      },
      {
        value: 0,
        itemStyle: {
          color: gradientColors_options9[1]
        }
      },
      {
        value: 0,
        itemStyle: {
          color: gradientColors_options9[2]
        }
      },
      {
        value: 0,
        itemStyle: {
          color: gradientColors_options9[3]
        }
      },
      {
        value: 0,
        itemStyle: {
          color: gradientColors_options9[4]
        }
      },
      //  36,30,50
      ],
  }
],
});